<template>
  <div class="trend">
    <div class="echarts-wrap">
        <div class="areaBox">
            <div class="text">{{ trendData.name }}趋势数据展示</div>
            <div class="btns">
                <el-button @click="table_back" type="primary" plain>返回</el-button>
            </div>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane :label="trendData.name + '趋势图'" name="2"></el-tab-pane>
            <el-tab-pane :label="trendData.name + '表格图'" name="1"></el-tab-pane>
        </el-tabs>
        <el-table
            v-if="activeName == '1'"
            v-loading="tableLoading"
            :data="tableData"
            style="width: 100%"
            border
            stripe
            >
            <el-table-column
                align="center"
                label="区域"
                prop="name"
            ></el-table-column>
            <el-table-column
                v-for="(item,index) in headList" :key="index"
                align="center"
                :label="item.acctMonth"
                :prop="'thisMonthIncome' + index"
                width="70px"
            ></el-table-column>
        </el-table>
        <div v-if="activeName == '2'" class="echarts" v-loading="chartsBoolean">
            <div v-for="(item, index) in lineList" :key="index">
                <lineEcharts
                :id="'lineEcharts' + index"
                :lineData="item"
                ></lineEcharts>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import {
  incomeCompletion,incomeCompletionTable
} from "@/api/workspace/income";
import lineEcharts from './lineEcharts'
export default {
  name: "trend",
  components: {
    lineEcharts
  },
  props: {
    trendData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
        chartsBoolean: false,
        lineList: [],
        activeName: '2',
        tableData: [],
        tableLoading: false,
        headList: []
    }
  },
  mounted() {
    this.init()
    this.getTableData()
  },
  methods: {
    init() {
      this.lineList = []
      this.chartsBoolean = true
      incomeCompletion({
        acctMonth: this.trendData.time,
        areaId: this.trendData.areaId,
        code: 1,
        indexCode: this.trendData.indexCode,
      }).then((res) => {
        if (res.code == 200) {
          let data = res.data.dataList;
          let arr = [];
          data.forEach((item) => {
            let lastData = [];
            let indata = [];
            item.data.forEach((its) => {
              lastData.push(its.lastYearIncome);
              indata.push(its.thisMonthIncome);
            });
            let indataArr = []
            indata.forEach(item => {
                if (item != undefined &&item != null) {
                    indataArr.push(item)
                }
            })
            let obj = {};
            obj["title"] = item.name;
            obj["lastdata"] = lastData;
            obj["indata"] = indataArr;
            arr.push(obj);
          });
          this.lineList = arr;
          this.chartsBoolean = false
        }
      });
    },
    getTableData() {
        this.tableLoading = true
        incomeCompletionTable({
            acctMonth: this.trendData.time,
            areaId: this.trendData.areaId,
            code: 1,
            indexCode: this.trendData.indexCode,
        }).then(res => {
            if (res.code == 200) {
                this.headList = res.data.dataList[0].data
                let arr = res.data.dataList
                arr.map(item => {
                    item.data.map((it,index) => {
                        item['thisMonthIncome' + index] = it.thisMonthIncome
                    })
                })
                this.tableData = arr
                this.tableLoading = false
            }
        })
    },
    table_back() {
      this.$emit('table_back')
    },
    handleClick(tab) {
      this.activeName = tab.name
    },
  },
};
</script>

<style lang="scss" scoped>
.trend {
    width: 100%;
    height: 100%;
    padding-top: 20px;
}
.echarts-wrap {
    padding: 0 20px 20px;
    .areaBox {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 20px;
        position: relative;
        margin-bottom: 20px;
        .text {
          font-size: 22px;
        }
        .btns {
          position: absolute;
          right: 0;
        }
    }
    .echarts {
        min-height: 500px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        > div {
        width: 33.33%;
        height: 200px;
        }
    }
}
</style>
